import {Component,createRef} from 'react'
import {Switch, Button } from 'antd';
import {departmentList, departmentStatus,departmentDelete} from '@/api/department'
import TableComponent from "@/components/tab";
import './list.scss'
export default class DepartmentList extends Component {
    constructor() {
        super();
        this.state = {
            tableLoading: false,
            rowSelection: {
                onChange: (selectedRowKeys) => {
                    this.setState({selectedRowKeys});
                },
            },
            selectedRowKeys: [],
            data: [],
            listForm: {
                name: "",
                pageNumber: 1,
                pageSize: 10
            },
            pagination: {
                showSizeChanger: true,
                showQuickJumper: true,
                total: 0,
                current:1,
                showTotal: (total) => {
                    return `${total}条数据`
                },
                onChange: (current,pageSize)=>{
                    let pagination = this.state.pagination;
                    pagination.current = current;
                    this.state.listForm.pageNumber = current;
                    this.state.listForm.pageSize = pageSize;
                    this.getList()
                    this.setState({
                        ...this.state,
                        pagination
                    })
                }
            },
            confirmLoading:false,
            delId:"",
            tabConfig: {
                columns : [
                    {
                        "title": '部门名称',
                        "dataIndex": 'name',
                        "width": 400
                    },
                    {
                        title: '禁启用',
                        dataIndex: 'status',
                        render: (status, row) => <Switch onChange={(status) => this.changeSwitch(status, row)}
                                                         checkedChildren="开启" unCheckedChildren="禁用"
                                                         defaultChecked={status}/>,
                        width: 400
                    },
                    {
                        title: '人员数量',
                        dataIndex: 'number',
                        width: 400
                    },
                    {
                        title: '操作',
                        dataIndex: 'address',
                        width: 300,
                        render: (address,row) => {
                            return (
                                <div className={'btn-box'}>
                                    <Button onClick={this.handleEdit.bind(this,row.id)} type="primary">编辑</Button>
                                    <Button onClick={this.handleDel.bind(this,row.id)}>删除</Button>
                                </div>
                            )
                        }
                    }
                ],
                pagination: false,
                rowKey:'id',
                getList: departmentList,
                listForm: {
                    name:''
                },
                searchList: [
                    {
                        type:'Input',
                        name: 'name',
                        label: '部门名称'
                    }
                ],
                footer:()=>{
                    return (
                        <div className={'footer'}>
                            <Button onClick={this.handleBatchDel}>批量删除</Button>
                        </div>
                    )
                }
            }
        }
        this.tab = createRef()
    }
    // 编辑
    handleEdit(id){
        this.props.history.push({
            pathname:'/index/department/add',
            state:{
                id
            }
        })
        // this.props.history.push(`/index/department/add/${id}`)
    }
    // 处理删除
    handleDel(delId){
        this.setState({
            ...this.state,
            delId,
            visible:true
        })
    }
    // 修改状态
    changeSwitch(status, row) {
        departmentStatus({
            id: row.id,
            status
        }).then(e => {
            console.log(e)
        })
    }
    componentDidMount() {
        this.getList()
    }
    getList(){
        this.setState({
            ...this.state,
            tableLoading:true
        })
        departmentList(this.state.listForm).then(e => {
            const {data, total} = e.data
            let pagination = this.state.pagination
            pagination.total = total
            this.setState({
                ...this.state,
                data,
                pagination,
                tableLoading:false
            })
        })
    }

    handleSearch = (form)=>{
        console.log(form)
        let listForm = this.state.listForm
        listForm.name = form.name;
        this.setState({
            ...this.state,
            listForm
        })
        this.getList()
    }
    handleBatchDel = ()=>{
        /*this.setState({
            ...this.state,
            delId:this.state.selectedRowKeys.join(','),
            visible:true
        })*/
        this.tab.current.handleShowModal({
            title: '提示',
            content: '是否删除？',
            interface:departmentDelete
        })
    }
    render() {
        return (
            <div>
                <TableComponent ref={this.tab} tabConfig={this.state.tabConfig} />
            </div>
        )
    }
}

